<script setup lang="ts">
import { onMounted, getCurrentInstance, watchEffect } from 'vue'
import * as echarts from 'echarts'

const that = getCurrentInstance();

const packData = [200, 260, 240, 240, 240, 240, 240, 240]

const drawEcharts = () => {
  var myChart = echarts.init(that?.refs.main)
  var option = {
    title: {
      text: '缴库情况',
      x: '5%',
      textStyle: {
        color: '#c0daff',
        fontSize: 18,
        lineHeight: 30,
      },
      backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#304ea6ff'
      }, {
        offset: 1,
        color: '#304ea600'
      }]),
      padding: [0, 300, 0, 20]
    },
    legend: {
      data: ['目标', '实际'],
      textStyle: {
        color: 'c0daff',
        fontSize: 18
      }
    },
    grid: {
      height: '78%'
    },
    xAxis: {
      type: 'category',
      data: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
      axisLabel: {
        color: '#edffff',
        fontSize: 14
      }
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: '#edffff',
        fontSize: 14
      }
    },
    series: [
      {
        name: '目标',
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          fontSize: 18,
          color: '#ebffff'
        },
        z: -1,
        data: new Array(9).fill(240),
        color: '#5470c6'
      },
      {
        name: '实际',
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          fontSize: 12,
          formatter: function (data: { value: number }) {
            if (data.value < 240) return `{red|${data.value}\n(${Math.floor(data.value / 2.4)}%)}`
            if (data.value > 240) return `{green|${data.value}\n(${Math.floor(data.value / 2.4)}%)}`
            return `{black|${data.value}\n(${Math.floor(data.value / 2.4)}%)}`
          },
          rich: {
            red: {
              color: '#f00',
              fontSize: 18
            },
            green: {
              color: '#0f0',
              fontSize: 18
            },
            black: {
              color: '#ebffff',
              fontSize: 18
            },
          },
        },
        data: packData,
        color: '#91cc75'
      },
    ],
  }

  myChart.setOption(option);
}

onMounted(() => {
  drawEcharts();
})
</script>

<template>
  <div ref="main" style="width: 100%; height: 95%; position: relative; top: 10px;"></div>
</template>

<style scoped></style>
